<template>
  <div style="margin-left: 5px;">
    <div>
      <div>
        <div>
          <h3 style="display:inline-block">{{Data.CodeNum}}.</h3>
          <span v-html="Data.Title" style="display:inline-block"></span>
          <el-input-number
            style="margin-left:10px"
            size="mini"
            v-if="Data.TitleBlank"
            @change="checkItem()"
            :controls="false"
            v-model="Data.BlankValue"
          ></el-input-number>
          <el-button
            @click="divvisibility(1)"
            type="text"
            style="float:right"
            v-if="!preview"
          >{{see}}</el-button>
        </div>
        <div v-if="visible">
          <el-button  type="text" @click="lixian=!lixian">离线模式 </el-button>
          <div class="option-area" style="margin: 5px;" v-if="!lixian">
            <el-table :data="Data.RowTitles" style="width: 100%">
              <el-table-column fixed type="index" label width="100" :index="GetRowTitleByIndex"></el-table-column>
              <el-table-column align="center" :label="Data.Condition">
                <el-table-column align="center" :label="Data.TrueTitle">
                  <template slot-scope="scope">
                    <el-radio
                      :name="scope.row.Title"
                      v-model="scope.row.TureOrFalse"
                      :label="true"
                      @change="getitem(1,scope.row.Index,scope.row.SelValue)"
                    >
                      <span/>
                    </el-radio>
                  </template>
                </el-table-column>
                <el-table-column align="center" :label="Data.FalseTitle">
                  <template slot-scope="scope">
                    <el-radio
                      :name="scope.row.Title"
                      v-model="scope.row.TureOrFalse"
                      :label="false"
                      @change="getitem(2,scope.row.Index,'')"
                    >
                      <span/>
                    </el-radio>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column align="center" :label="Data.OptionsTitle">
                <el-table-column
                  align="center"
                  v-bind:key="opt.itemId"
                  v-for="opt in Data.Options"
                  :label="opt.itemName"
                  checked="false"
                >
                  <template slot-scope="scope">
                    <el-radio
                      :disabled="!scope.row.TureOrFalse"
                      v-model="scope.row.SelValue"
                      :name="scope.row.Title"
                      :label="opt.itemName"
                      @change="getitem(1,scope.row.Index,scope.row.SelValue)"
                    >
                      <span/>
                      <el-input
                        style="width:100px"
                        v-model="opt.BlankValues[scope.row.Index]"
                        v-if="opt.canFillBlank&&(scope.row.SelValue==opt.itemName)"
                        size="mini"
                      />
                    </el-radio>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
          </div>
          
          <!-- 离线表格模式-->
          <div v-if="lixian">
            <table border="1px" cellspacing="0" v-if="type" style="width: 50%">
                <!-- 一列 -->
                <tr>
                    <td></td>
                    <th colspan="2">判断条件说明</th>
                    <th :colspan="Data.Options.length">选项大标题</th>
                </tr>
                <tr>
                   <td></td>
                   <th>是</th>
                   <th>否</th> 
                   <td v-for='opt in Data.Options' :key="opt.itemName">
                       {{opt.itemName}}
                   </td>
                </tr>
                <tr v-for="r in Data.RowTitles" :key="r.Title">
                    <td>{{r.Title}}</td>
                    <td></td>
                    <td></td>
                    <td v-for='(opt,index) in Data.Options' :key="opt.itemName">
                      {{index+1}}
                    </td>
                </tr>
              </table>
          </div>

        </div>
      </div>
    </div>

    <div id="editor" v-if="canEdit==true" style="margin: 5px;">
      <el-card class="box-card" style="margin-top:20px">
        <EditorComponent v-model="Data.Title" :Html="Data.Title"/>
        <el-row>
          <el-co :span="6">
            <el-input placeholder="请输入内容" v-model="Data.Condition">
              <template slot="prepend">判断说明</template>
            </el-input>
          </el-co>
          <el-co :span="6">
            <el-input placeholder="请输入内容" v-model="Data.TrueTitle">
              <template slot="prepend">条件为true时标题</template>
            </el-input>
          </el-co>

          <el-co :span="6">
            <el-input placeholder="请输入内容" v-model="Data.FalseTitle">
              <template slot="prepend">条件为false时标题</template>
            </el-input>
          </el-co>

          <el-co :span="6">
            <el-input placeholder="请输入内容" v-model="Data.OptionsTitle">
              <template slot="prepend">选项说明标题</template>
            </el-input>
          </el-co>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-card>
              <div style="padding: 14px;">
                <span>行标题</span>
                <div>
                  <el-input
                    type="textarea"
                    @input="UpdateRowTitle"
                    v-model="Data.RowTitleText"
                    :rows="10"
                    placeholder="请输入内容"
                  ></el-input>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="16">
            <el-card style="margin-left:10px">
              <el-table :fit="true" :data="Data.Options" style="width: 100%">
                <el-table-column label="选项文字">
                  <template slot-scope="scope">
                    <div id="title-row">
                      <el-input
                        size="small"
                        style="display: inline-block;"
                        v-model="scope.row.itemName"
                        placeholder="请输入内容"
                        @change="inputchange"
                      ></el-input>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column label="允许填空">
                  <template slot-scope="scope">
                    <el-checkbox v-model="scope.row.canFillBlank"></el-checkbox>
                  </template>
                </el-table-column>

                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <div style="display: inline-block;margin-top: 5px;">
                      <el-button
                        type="warning"
                        @click="remove(scope.row.itemId)"
                        size="mini"
                        style="display: inline-block;"
                        icon="el-icon-minus"
                        circle
                      ></el-button>
                      <el-button
                        type="danger"
                        @click="insert(scope.row.itemId)"
                        size="mini"
                        style="display: inline-block;"
                        icon="el-icon-plus"
                        circle
                      ></el-button>
                      <el-button
                        size="mini"
                        style="display: inline-block;"
                        @click="moveUp(scope.row.itemId)"
                        icon="el-icon-top"
                        circle
                      ></el-button>
                      <el-button
                        size="mini"
                        style="display: inline-block;"
                        @click="moveDown(scope.row.itemId)"
                        icon="el-icon-bottom"
                        circle
                      ></el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <BatchAddComponent v-model="msg" @getitem="itemNameArry" :itemnamearry="itemname"></BatchAddComponent>
            </el-card>
          </el-col>
        </el-row>

        <el-button type="warning " style="margin-top:5px;width:100%" @click="canEdit=false">完成编辑</el-button>
      </el-card>
    </div>
  </div>
</template>

<script lang='ts'>
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
import TBaseQuestion from "./ts/TBaseQuestion";
import TrueFalseMatrixSelSubject, {
  TrueFalseMatrixOption
} from "./ts/TrueFalseMatrixSelSubject";
import { QuestionDataTypes, QuestionTypes } from "./ts/QuestionDataTypes";
import EditorComponent from "./EditorComponent.vue";
import OrderBy, { OrderByTypes } from "./ts/OrderByTypes";

import MatrixRowTitle from "./ts/MatrixRowTitle";
import BatchAddComponent from "./BatchAddComponent.vue";
@Component({
  components: { EditorComponent, BatchAddComponent }
})
//矩阵单选组件
export default class TrueFalseMatrixRadioSelComponent extends TBaseQuestion<
  TrueFalseMatrixOption,
  TrueFalseMatrixSelSubject
> {
  $name: string = "TrueFalseMatrixRadioSelComponent";
  canEdit = true;

 
  type = true;

  itemname = "";

  msg = "";
  gotMsg: string[] = [];
  options: TrueFalseMatrixOption[] = [];

  get computedRowText() {
    return this.getOptionText();
  }

  @Watch("msg")
  getstr() {
    console.log(this.msg);
    this.gotMsg = this.msg.split("\n");
    this.gotMsg.forEach(element => {
      if (element != " ") {
        var opt = new TrueFalseMatrixOption();
        opt.itemName = element;
        this.options.push(opt);
      }
    });
    this.Data.Options = this.options;
    this.options = [];
  }

  itemNameArry() {
    this.itemname = this.getOptionText();
  }

  //显示题目内容div

  msgTitle = "";

  //获取options中每一项的name
  getOptionText(): string {
    let options = "";
    let n = this.Data.Options.length;
    for (let i = 0; i < n; i++) {
      if (i < n - 1) {
        options += this.Data.Options[i].itemName + "\n";
      } else {
        options += this.Data.Options[i].itemName;
      }
    }
    return options;
  }
  constructor() {
    super(TrueFalseMatrixOption, TrueFalseMatrixSelSubject);

    this.Data.DataType = QuestionDataTypes.dtText;
    this.Data.QuestionType = QuestionTypes.qtMatrixJudgeRadio;
    this.Data.Title = "设置题目";
    for (var i: number = 0; i < 3; i++) {
      this.Data.RowTitles.push(new MatrixRowTitle(i, "标题" + (i + 1)));
    }

    this.Data.RowTitleText = this.ConvertTitleArrayToStr(this.Data.RowTitles);

    for (var i: number = 0; i < 5; ++i) {
      var opt = new TrueFalseMatrixOption();
      opt.itemName = "选项" + i;
      for (var j: number = 0; j < this.Data.RowTitles.length; j++) {
        opt.BlankValues.push("");
      }
      this.Data.Options.push(opt);
    }

    this.Data.RowTitleText = this.ConvertTitleArrayToStr(this.Data.RowTitles);
  }

  mounted() {
    super.mounted();
    this.initProps();

    console.info("component mounted!");
  }
  @Watch("Data.RowTitles")
  watchData(newVal: Array<MatrixRowTitle>, oldVal: Array<MatrixRowTitle>) {
    console.log("RowTitle Changed:" + newVal);
    if (newVal == null) return;
    this.Data.RowTitleText = this.ConvertTitleArrayToStr(newVal);
  }

  //输入框内容改变
  inputchange() {
    this.msg = this.getOptionText();
  }
  //删除选项
  remove(str: string): void {
    super.remove(str);
    this.msg = this.getOptionText();
  }
  //插入选项
  insert(id: string): void {
    let options = this.Data.Options;
    options.splice(
      options.findIndex(item => item.itemId === id) + 1,
      0,
      this.createNewOption(TrueFalseMatrixOption)
    );
    this.SetBlankValues();
    this.msg = this.getOptionText();
  }
  //向上移动选项
  moveUp(id: string): void {
    super.moveUp(id);
    this.msg = this.getOptionText();
  }
  moveDown(id: string) {
    super.moveDown(id);
    this.msg = this.getOptionText();
  }
  //数组转为字符串
  ConvertTitleArrayToStr(arry: Array<MatrixRowTitle>): string {
    var tempArray: Array<string> = [];
    for (var t of arry) {
      tempArray.push(t.Title);
    }

    return tempArray.join("\n");
  }

  GetRowTitles(): string {
    return this.ConvertTitleArrayToStr(this.Data.RowTitles);
  }

  //设置填空数组的长度
  SetBlankValues(): void {
    for (var opt of this.Data.Options) {
      opt.BlankValues = [];

      for (var i = 0; i < this.Data.RowTitles.length; ++i) {
        opt.BlankValues.push("");
      }
    }
  }
  //插入选项

  getQuestionData(): any {
    return this.Data;
  }

  setQuestionData(data: string) {}

  getTitle(): void {
    // console.info(Data.Title);
    // this.Data.Title;
  }

  setTitle(txt: string): void {
    console.info(txt);
  }

  GetHtml(html: string): void {
    this.Data.Title = html;
  }

  UpdateRowTitle(): void {
    var tempArray = this.Data.RowTitleText.split("\n");
    this.Data.RowTitles = [];

    var i = 0;
    for (var t of tempArray) {
      this.Data.RowTitles.push(new MatrixRowTitle(i, t));
      ++i;
    }

    this.SetBlankValues();
  }

  GetRowTitleByIndex(index: number): string {
    return this.Data.RowTitles[index].Title;
  }

  
  getitem(type: number, num: number, val: string) {}
  clear(id: string) {}
}
</script>
 
<style>
.tui table tr td {
  border: 1px solid #ccc;
}
.tui table tr th {
  border: 1px solid #ccc;
}
</style>
